<template>
	<view class="page" :style="{minHeight:$height()}">
		<view class="serviceBanner">
			<image :src="$utils.imagePath('/upload/image/serviceBanner.png')" style="width: 100%;height: 100%;"></image>
		</view>
		<view class="keFu" >
			<button class="keFuItems u-reset-button" open-type="contact">
				<image src="../../static/index/zaixiankehuicon.png" style="width: 28rpx;height: 28rpx;"></image>
				<view class="keFuItemsTxt">
					在线客服
				</view>
			</button>
			<view class="keFuItems" @click="tel">
				<image src="../../static/index/dianhuakefu.png" style="width: 28rpx;height: 28rpx;"></image>
				<view class="keFuItemsTxt">
					电话客服
				</view>
			</view>
		</view>
		<view class="foodter">
			
			<view class="king-flex__between">
				<view class="foodterTxt">
						常见问题
				</view>
			</view>	
			
			<view class="searchBox centerFlex">
				<view class="icon">
					<image src="@/static/Icon/serch.png" mode="" class="icon"></image>
				</view>
				<input placeholder="请输入搜索内容" v-model="keywords" class="sch" />
				<view @click="search" class="txt">
					搜索
				</view>
			</view>
			
			<view class="list"  v-for="(item,index) in list" :key="index" @click="$next(`/pages/index/problemDetail?id=${item.id}`)">
				<view class="kuai">
					{{problemClass[item.type].name}}
				</view>
				<view class="txt u-line-1" >
					{{item.title}}
				</view>
				<u-icon name="arrow-right" style="font-size: 30rpx; color: #999;"></u-icon>
			</view>
		</view>
		<u-loadmore v-if="list.length !== 0" :status="status" :load-text="loadText" />
		<image v-else src="@/static/image/empty.png" mode="widthFix" class="is-empty"></image>
	</view>
</template>

<script>
	export default{
		data() {
			return {
				// 页面数据初始化状态
				loadText: {
					loadmore: '轻轻上拉，加载更多',
					loading: '努力加载中',
					nomore: '我也是有底线的'
				},
				contact:[],
				keywords:"",
				more: false,
				page: 1, //页码
				limit: 10, //条数
				list: [], //
				problemClass: [{
						name: '教程',
						className: 'lit3'
					},
					{
						name: '解读',
						className: 'lit5'
					},
					{
						name: '规则',
						className: 'lit6'
					},
				
				],
				
			}
		},
		onLoad() {
			this.getList()
		},
		onShow() {
			this.getContact()
		},
		//下拉刷新
		onPullDownRefresh() {
			this.page = 1
			this.getList()
		},
		//上拉加载
		onReachBottom() {
			if (this.page == 1) {
				return
			}
			if (this.more) {
		
				this.getList()
			}
		},
		methods:{
			getContact(){
				this.$axios.request(this.$api.getParamsConfig, "GET", {
					config: "CONTACT"
				}).then((val) => {
					this.contact = val.data.paramValue.split(",")
				})
			},
			search(){
				this.page = 1
				this.getList()
			},
			getList() {
				let params = {
					page: this.page,
					limit: this.limit,
					orderField: 'id',
					order: 'desc'
				}
				if(this.keywords){
					params.keywords = this.keywords
				}
				this.$axios.request(this.$api.getProblemRes, "GET", params).then((val) => {
					uni.stopPullDownRefresh();
					this.list = this.page == 1 ? val.data.list : this.list.concat(val.data.list)
					if (Math.ceil(val.data.total / this.limit) > this.page) {
						this.more = true;
						this.page++
					} else {
						this.more = false;
					}
				})
			},
			// 拨打的弹出层
			tel() {
				uni.makePhoneCall({
					phoneNumber: this.contact[0]
				});
			}
		}
	}
</script>

<style lang="scss">
	@import "../../style/contentFlex.css";
	
	.page {
		/* overflow-y: auto; */
		width: 100%;
		/* height: 100vh; */
		background-color: #FFFFFF;
	}

	.serviceBanner {
		width: 100%;
		height: 240rpx;
	}

	.keFu {
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
		overflow: hidden;
		width: 100%;
		margin-top: 16rpx;
		padding:10rpx auto;
	}

	.keFuItems {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 360rpx;
		height: 64rpx;
		background-color: #3975EA;
	}

	.keFu .keFuItems:first-child {
		margin-bottom: 20rpx;
	}

	.keFu .keFuItems:last-child {
		background-color: #FFA12A;
	}

	.keFuItemsTxt {
		height: 40rpx;
		font-size: 28rpx;
		font-family: "PingFang SC";
		font-weight: 400;
		line-height: 40rpx;
		color: #FFFFFF;
		margin-left: 60rpx;
	}

	.foodter {
		/* overflow-y: auto; */
		overflow: hidden;
		width: 100%;
		/* height: 880rpx; */
		padding: 25rpx;
	}

	.list {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		height: 85rpx;
		background-color: #FFFFFF;
		margin-bottom: 4rpx;
		/* padding: 0 32rpx; */
	}

	.txt {
		width: 570rpx;
		padding: 0 10rpx;
		font-size: 28rpx;
		font-family: "PingFang SC";
		font-weight: 300;
		color: #666666;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.kuai {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 56rpx;
		height: 32rpx;
		font-size: 20rpx;
		font-family: "PingFang SC";
		font-weight: 400;
		line-height: 39rpx;
		color: #3975EA;
		border: 1rpx solid #3975EA;
	}
	.foodterTxt {
		font-size: 28rpx;
		width: 30%;
		font-family: "PingFang SC";
		font-weight: 600;
		line-height: 40px;
		color: #333333;
	}
	
	.searchBox {
	    display: flex;
	    justify-content: space-between;
	    width: 100%;
	    height: 72rpx;
	    background: rgba(0, 0, 0, 0.06);
	    margin: 3px auto 0;
	
		.icon {
			width: 34rpx;
			height: 28rpx;
			margin-left: 15rpx;
		}
	
		.sch {
			height: 40rpx;
			margin: 0 16rpx;
			width: 70%;
			border-right: 2rpx solid #A8B5C5;
			// background-color: red;
		}
	
		.txt {
			font-size: 28rpx;
			font-family: "PingFang SC";
			font-weight: 300;
			line-height: 60rpx;
			color: #3975EA;
			opacity: 1;
			width: 90rpx;
		}
	}
</style>
